<script lang="ts" setup>
  import { onMounted, onBeforeUnmount, watch, ref, reactive,defineEmits } from 'vue';
  import gmDrawer from '@/components/Drawer/index.vue'
  import {  getRecordUrl } from "@/api/site"
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import EZUIKit from 'ezuikit-js';

const searchData = reactive<any>({
  startTime: new Date().toISOString().slice(0, 10) + ' 00:00:00', // Default to current date + 00:00:00
  endTime: new Date().toISOString().slice(0, 10) + ' 23:59:59' // Default to current date + 23:59:59
  // startTime:'2025-03-15 00:00:00',
  // endTime:'2025-03-15 23:59:59'
});
const searchFormRef = ref<FormInstance | null>(null);

interface Props {
  id?: number
}

const props = withDefaults(defineProps<Props>(), {
  id: 0,
});

const form = ref<any>({})
const formRef = ref<FormInstance>()
const dialogRef = ref<InstanceType<typeof gmDrawer>>()
const emit = defineEmits(['cancel', 'success'])
const storeList = ref<any>([])


const UIKitDEMO = ref<any>(null)

var themeData = ref<any>({ 
      autoFocus: 0, // 设置为0，视频按钮条就不会消失
      poster:
        'https://resource.eziot.com/group1/M00/00/89/CtwQEmLl8r-AZU7wAAETKlvgerU237.png',
      "header": { 
        "color": "#1890ff", 
        "activeColor": "#FFFFFF", 
        "backgroundColor": "#000000", 
        "btnList": [ 
          { 
            "iconId": "deviceID", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "顶部设备序列号", 
            "isrender": 1 
          }, 
          { 
            "iconId": "deviceName", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "顶部设备名称", 
            "isrender": 1 
          }, 
          { 
            "iconId": "cloudRec", 
            "part": "right", 
            "defaultActive": 0, 
            "memo": "云存储", 
            "isrender": 0 
          }, 
          { 
            "iconId": "rec", 
            "part": "right", 
            "defaultActive": 0, 
            "memo": "SD卡回放", 
            "isrender": 0 
          } 
        ] 
      }, 
      "footer": { 
        "color": "#FFFFFF", 
        "activeColor": "#1890FF", 
        "backgroundColor": "#00000021", 
        "btnList": [ 
          { 
            "iconId": "play", 
            "part": "left", 
            "defaultActive": 1, 
            "memo": "播放", 
            "isrender": 1 
          }, 
          { 
            "iconId": "capturePicture", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "截屏按钮", 
            "isrender": 1 
          }, 
          { 
            "iconId": "sound", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "声音按钮", 
            "isrender": 1 
          }, 
          { 
            "iconId": "pantile", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "云台控制按钮", 
            "isrender": 1 
          }, 
          { 
            "iconId": "recordvideo", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "录制按钮", 
            "isrender": 1 
          }, 
          { 
            "iconId": "talk", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "对讲按钮", 
            "isrender": 1 
          }, 
          { 
            "iconId": "zoom", 
            "part": "left", 
            "defaultActive": 0, 
            "memo": "电子放大", 
            "isrender": 1 
          }, 
          { 
            "iconId": "speed", 
            "part": "right", 
            "defaultActive": 1, 
            "memo": "倍数", 
            "isrender": 1 
          }, 
          { 
            "iconId": "hd",
            "part": "right",
            "defaultActive": 0,
            "memo": "清晰度切换按钮",
            "isrender": 1
          }, 
          { 
            "iconId": "webExpend", 
            "part": "right", 
            "defaultActive": 0, 
            "memo": "网页全屏按钮", 
            "isrender": 1 
          }, 
          { 
            "iconId": "expend", 
            "part": "right", 
            "defaultActive": 0, 
            "memo": "全局全屏按钮", 
            "isrender": 1 
          } 
        ] 
      } 
    })

//搜索操作
const handleSearch = () => {
  getData()
}

//重置搜索表单
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}

onBeforeUnmount(() => {
  if (UIKitDEMO.value) {
    UIKitDEMO.value.stop()
    UIKitDEMO.value.stopTalk()
  }
});

const rules: FormRules = {
  name: [
    { required: true, message: '请输入用户名', trigger: 'change' },
  ],
}



const cancel = () => {
  emit('cancel')
}

const success = () => {
  
}

const getData = () => {
  if (UIKitDEMO.value) {
    UIKitDEMO.value.stop()
    UIKitDEMO.value.stopTalk()
  }
  getRecordUrl({ id: props.id, isSmallApp: false, startTime: searchData.startTime, endTime: searchData.endTime }).then((res: any) => {
    console.log(res, 'resresres')
    UIKitDEMO.value = new EZUIKit.EZUIKitPlayer({
          id: `ezuikit-player`,
          url: res.url,
          width: 600, 
          height: 400,
          audio:0,
          template: "28b22f31251c4628882289c4640ba682",
          accessToken: res.accessToken,
          themeData: themeData.value,
          footer: [ "hd", "fullScreen"], 
    })
  })
}


if (props.id) getData()
</script>

<template>
  <gmDrawer
      title="历史视频"
      @close="cancel"
      :showSubmitBtn="false"
      ref="dialogRef"
      size="800px"
    >
      <div class="fieldTable">
        <div shadow="never" class="search-wrapper">
        <div class="search-main">
          <el-form ref="searchFormRef" label-width="90px" :inline="true" label-position="left" :model="searchData">
            <el-form-item prop="startTime" label="开始日期">
              <el-date-picker v-model="searchData.startTime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" style="width:500px" placeholder="请选择"/>
            </el-form-item>
            <el-form-item prop="endTime" label="结束日期">
              <el-date-picker v-model="searchData.endTime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" style="width:500px" placeholder="请选择"/>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-btn">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </div>
      </div>
      <div class="toolbar-wrapper">
      </div>
        <el-form ref="formRef" label-width="100px" label-position="top">
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="24">
              <el-form-item label="历史视频">
                <div id="ezuikit-player"></div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </gmDrawer>
</template>

<style lang="scss" scoped>
#videoPlayer {
  width: 500px;
  height: 300px;
  margin: 50px auto;
}
</style>
